<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>响应式布局</title>
		<style>
			*{
				margin: 0;
				padding: 0px;
			}
			ul{
				
				list-style-type: none;
			}
			a{
				text-decoration: none;
			}
			a:hover{
				
			}
			.header{
				
				margin: 0 auto;
				height: 100px;
				width: 1200px;
				background-color:silver;
				z-index: 1;
				border-bottom: 1px solid;
			position: fixed;
				
			}
			.header ul li{
				
				text-align: center;
				width: 100px;
				float: left;
				
				
			}
			.header ul li a{
				font-size: 20px;
			}
			.header ul li a:hover{
				color:red;
				border-bottom: 1px solid;
			}
			@media screen and (max-width:800px) {
				.header{
					width: 100%;
					height: 180px;}
				.header ul li{width: 50%;}
				
				.bodys{
					
					width: 100%;
				}
				.box1{
				
					width: 300px;float: none;
				}
				.box1 img{
						margin-top: 200px;
					width:300px ;
				}
				.box2{
					width: 300px;
				}
				.box2 img{
					width:300px ;float: none;
				}
				.box2-left{
					width: 300px;
					
				}
				.box2-right{
					width: 300px;
				}
				.box3{
					width: 1200px;
					height: 400px;
					background-image: url(img/麒麟.jpg);
				
				}
				.box4{
					display: none;
				}
				.box5{
					width: 300px;
				}
				.box6{
					width: 600px;
				}
				
				.box6 img{
					width: 600px;
				}
				
				.box6 .box6-p{
					width: 600px;
				}
			}
			@media screen and (min-width:768px){
				.header{width: 100%;}
				.header ul li{
					
				}
				.box1{
					width: 100%;
				}
				.box2{width: 100%;}
				
				
			}
			@media screen and (max-width:1200px) {
				.header{
					width: 100%;}
					.box1{
						width: 100%;
					}
					.box1 img{
						width: 600px;
					}
				.box2{
					width: 100%;
				}
				
				.box2 img{
					width:800px ;float: none;
					margin: 0 auto;
				}
				.box2-left{
					width: 800px;
					
				}
				.box2-right{
					width: 800px;
				}
				.box4{width: 1200px;background-image: url(img/麒麟.jpg);z-index: 1;}
				.box5{
					width: 700px;
				}
				.box6{
					width: 800px;
				}
				.box6>h1{
					float: none;
					font-size: 30px;
				}
				.box6 img{
					width: 800px;
				}
				}
			.box1{
				margin: 0 auto;
				background-color: #F8F8F8;
				text-align: center;
				
			}
			.header img{
				width: 220px;
			}
			.button{
				text-align: center;
				float: right;
				width: 60px;height: 30px;
				background-color: darkred;border: 1px solid;
				border-radius: 30px;
			}
			.button:hover{
				background-color: #FF0000;
				cursor: hand;
			}
			.box2{
				margin: 0 auto;
				width: 1200px;
				background-color: #F8F8F8;
			}
			
			.box3
			{
				margin: 0 auto;
				
			}
			.box4{
				margin: 0 auto;
				width: 1200px;
				height: 600px;
				position: relative;
				background-image: url(img/威威.jpg) ;
				
			}
			
			.box5{
				margin: 0 auto;
				width: 1200px;
				margin-top: 80px;
				
			}
			.box6{
				margin: 0 auto;
				background-color: black;
				width: 1200px;
			}
			.box6-p{
				margin-top: 50px;
				margin-bottom: 60px;
			}
			
			.img1 img{
				
				float: left;
			}
			.img2 img{
				float: left;
			}
			.img3 img{
				float: left;
			}
			.img4 img{
				float: left;
			}
			.box2-left{
				float: left;
			}
			
			
			.box6 h1{
				color: "#C0C0C0";font-size: "50px;"
			}			
			.color-btn1{
				display: inline;
				width: 15px;
				height: 15px;
				background-color: silver;
				border-radius: 100%;
			}
			.clearfix:after{
				content: "";
				display: block;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<img src="img/hua_七彩看图.jpg" style="di"/>
			<h5 style="font-size: 30px;display: inline;">HUAWEI  Mate 40 Pro</h5>
			<div class="button clearfix">购买</div>
			
			<div class="clearfix">
			<ul >
				
				<li><a href="#">功能特征</a></li>
				<li><a href="https://consumer.huawei.com/cn/phones/mate40-pro/specs/">规格参数</a></li>
				<li><a href="https://consumer.huawei.com/cn/phones/mate40-series/accessories/">配件</a></li>
				<li><a href="https://consumer.huawei.com/cn/support/phones/mate40-pro/">服务支持</a></li>
				
			</ul>
			
			</div>
			
		</div>
		<div class="bodys">
			<div class="box1 clearfix">
				<div style="height: 100px;"></div>
				<img src="img/n.jpg">
				<h1 style="font-size: 50px;">怎么选，都心动</h1>
			</div>
			<div class="box2 clearfix" style="margin-top: 50px;">
				<div class="box2-left">
					<img src="img/1.png" />
				</div>
				<div class="box2-right">
					<p style="font-size: 30px;">你的 Mate，自带光环。熟悉的中轴对称设计，尽显理性世界中的秩序美。标识性星环设计，来自宇宙的设计灵感，引发对未知的⁠无⁠限⁠探⁠索⁠。</p>
					</div>
				</div>
				<div class="box2 clearfix">
					<div class="box2-left">
						<a href="https://consumer.huawei.com/content/dam/huawei-cbg-site/greate-china/cn/mkt/pdp/phones/mate40-pro/images/design/colors/cmf-n.webm"><img src="img/2.png" /></a>
					</div>
					<div class="box2-right">
						<div class="color-btn1"></div>
						<p style="font-size: 30px;">两种材质，五款颜色，十分出众。
						素皮的天生温润与玻璃的纯净质感，让你感受从指尖到心间的美妙。夏日胡杨的葱郁，代表着蓬勃向上的生命力；秋日胡杨的绚烂，张扬着热情与坚韧
						。浪漫秘银色，是光影变幻中难以捕捉的神秘；纯净的釉白色与亮黑色，呼应了白日的无暇和黑夜的静⁠谧。</p>
						<p style="font-size: 30px;"><a href="https://consumer.huawei.com/cn/campaign/woyouyipianhuyanglin/">华为邀你参加“我有一片胡杨林”公益活动 ></a></p>
						</div>
					</div>
					
					<div class="box5">
						<div class="img1 clearfix">
							<img src="img/q.png" />
							<p style="font-size: 30px;">上手 就流畅跟手</p>
							<p>最高支持 90 Hz 刷新率和 240 Hz 触控采样率⁠2，不论页面滑动还是应用切换，你的操作都如行云流水般顺⁠⁠滑⁠.</p>
						</div>
						<div class="img2 clearfix">
							<img src="img/w.png" />
							<p  style="font-size: 30px;">放心  IP68 级防尘抗水</p>
							<p>洗漱的水花，突然的大雨，IP68 级⁠3的出色抗水性能，都经得起考⁠⁠验⁠。</p>
						</div>
						<div class="img3 clearfix">
							<img src="img/e.png" />
							<p style="font-size: 30px;">舒适用眼 从细节着眼</p>
							<p>暗夜里恰当的亮屏节奏，在细节处悉心呵护你⁠的⁠双⁠眼。</p>
						</div>
						<div class="img4 clearfix">
							<img src="img/r.png" />
							<p style="font-size: 30px;">两种调音 随心操控</p>
							<p>屏幕侧边上下滑动，或者使用实体键都可调节音量，两种方式，任你挑⁠⁠选⁠。</p>
						</div>
					</div>
					<div class="box3"><center><h1>麒麟 9000 5G SoC 旗舰芯片，</h1></center></div>
					<div class="box4">
					  <p style="color: #C0C0C0;font-size: 50px;position:absolute;left: 50px;top: 50px;"><i>这颗芯 震撼人心</i></p>
						<p style="color: #C0C0C0;font-size: 30px;position: absolute;bottom: 100px;left: 50px;">
							麒麟 9000 5G SoC 旗舰芯片，以高能，突破可能。领先的 5 nm 制程工艺，集成 150 亿+ 晶体管⁠4，性能跨越式升级
						，功耗大幅降低，让你体验震撼的超前速度。智慧体验全面进化，带你先⁠见⁠未⁠⁠来</p>
					</div>
					<div class="box6">
						
						<h1>高清每一刻 精⁠彩⁠每⁠一⁠拍</h1>
						<img src="img/万网.jpg" />
						
						<div class="box6-p">
							
							<p style="color: #C0C0C0;font-size: 20px;">热爱宽广的世界，也喜欢它横平竖直的真实模样。</p>
							<p style="color: #C0C0C0;font-size: 20px;">后置超广角镜头，超大视野，容得下天高海阔，拍得全好友聚会。</p>
							<p style="color: #C0C0C0;font-size: 20px;">升级抗畸变算法，大幅减少画面边缘的形变，还原你眼里真实的世⁠⁠界⁠。</p>
						</div>
						
						
					
						<img src="img/有.jpg"/>
						<div class="box6-p">
							<p style="color: #C0C0C0;font-size: 20px;">细节之处，更见真功夫。5000 万像素超感知摄像头拥有充足进光量与强大解析力，</p>
							<p style="color: #C0C0C0;font-size: 20px;">配合全像素八核快速对焦及 XD Fusion 图像引擎优化，</p>
							<p style="color: #C0C0C0;font-size: 20px;">从朝阳到夜幕，HUAWEI Mate 40 Pro 为你真实记录每一个高⁠清⁠时⁠刻。</p>
						
						</div>
						<img src="哦.jpg" />
						<div class="box6-p">
							<p style="color: #C0C0C0;font-size: 25px;">一心多用，Mate 自有高招。新一代多屏协同</p>
							<p style="color: #C0C0C0;font-size: 25px;">技⁠术⁠13，电脑桌面内支持同时打开多个手机应用</p>
							<p style="color: #C0C0C0;font-size: 25px;">一屏多用，事半功倍。开启多个购物 App，选货</p>
							<p style="color: #C0C0C0;font-size: 25px;">比价，心头好也要买得值当；打开网课视频，边</p>
							<p style="color: #C0C0C0;font-size: 25px;">看边记重点，还能同时与好友互动交流，学习办公都⁠高⁠效⁠。</p>
							<p style="color: #C0C0C0;font-size: 30px;"><a href="https://consumer.huawei.com/cn/laptops/">进一步了解 HUAWEI MateBook></a></p>
						</div>
					</div>
					
						
					
					
					
		</div>
	</body>
</html>
